<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color="c">hello world</p>
    <input type="text" v-focus />
    <hr />
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from "./components/MyTest.vue";
export default {
  components: { MyTest },
  data() {
    return {
      c: "red",
      uname: "zhangsan",
    };
  },

  //自定义指令
  directives: {
    // 指令: {
    //   //el表示使用这个指令的元素,obj.value表示指令的值
    //   bind(el, obj) {},
    //   //只会执行一次,可以在里面对元素进行样式的设置,做一些初始化操作
    //   inserted() {}, //只会执行一次,可以在里面对元素进行行为操作,比如让元素获得焦点
    //   update() {}, //数据更新后,子组件的数据不一定更新,它会执行
    //   componentUpdated() {}, //数据更新后,包括子组件的数据,页面也更新后,会执行
    //   unbind() {}, //指令解绑的时候(组件销毁),它执行
    // },
    // 指令(el, obj) {}, //如果指令只有bind和update方法,并且两个方法一样,可以简写成函数写法
    // color: {
    //   bind(el, obj) {
    //     // console.log(el);
    //     // console.log(obj);
    //     el.style.color = obj.value;
    //   },
    //   update(el, obj) {
    //     el.style.color = obj.value;
    //   },
    // },
    color(el, obj) {
      // console.log(el);
      // console.log(obj);
      el.style.color = obj.value;
    },
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>